<template>
  <div>
    <div class="head">
      <div class="citybox">
        <City class="city" :city="city" @change="changeCity"/>
      </div>
      <div class="region"><Area :data="area" @change="changeArea"/></div>
    </div>
    <div class="info">
      <template v-for="value in areaf">
        <div v-for="item in value" class="item" @click="total(item)">
          <h2>{{ item.cinemaName }}</h2>
          <div>{{ item.address }}</div>
          <div><span class="z">座</span><span class="x">新人专享</span><span class="y">¥ 18.8元起</span></div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import City from '../common/City.vue'
import Area from '../common/Area.vue'

import http from '../../request/index'
import { mapState, mapMutations } from 'vuex'

export default {
  data() {
    return {
      city: {},
      area: {},
      areaf: {}
    }
  },
  computed: {
    ...mapState(['cityname'])
  },
  components: {
    City, Area
  },
  methods: {
    ...mapMutations(['changeCinemaData']),
    getArea() {
      let str = ''
      switch (this.cityname) {
        case '北京':
          str = 'bj'
          break;
        case '上海':
          str = 'sh'
          break;
        case '广州':
          str = 'gz'
          break;
        default:
          break;
      }
      http('/cinema/', this, 'get', { params: { city: str } }).then(res => {
        if(res.data.data.returnCode === '0') {
          this.area = res.data.data.returnValue.regionCinemas
          this.areaf = res.data.data.returnValue.regionCinemas
        }
        console.log(this.area);
      }).catch(err => console.log(err))
    },
    changeArea(area) {
      this.areaf = {[area]:this.area[area]}
    },
    changeCity() {
      this.getArea()
    },
    total(item) {
      this.$router.push('/ctotal')
      this.changeCinemaData(item)
    }
  },
  created() {
    //请求城市数据
    http('/city', this).then((res) => {
      if (res.data.data.returnCode === '0') {
        this.city = res.data.data.returnValue
      }
    }).catch(err => {
      console.log(err);
    })
    this.getArea()
  }
}
</script>

<style lang="less" scoped>
.head {
  display: flex;
  height: (40/16rem);
  font-size: (14/16rem);
  background-color: #fafafa;
  border-bottom: 1px solid #ebebeb;

  .citybox {
    width: 50%;
    text-align: center;
    line-height: (40/16rem);
    position: relative;
  }
  .citybox::after {
    content: '';
    display: block;
    position: absolute;
    top: 9px;
    right: 0;
    width: 1px;
    height: (24/16rem);
    background-color: #ebebeb;
  }

  .region {
    width: 50%;
    text-align: center;
    line-height: (40/16rem);
  }
}
.info {
  padding-left: (15/16rem);
  .item {
    padding: (15/16rem) (15/16rem) (15/16rem) 0;
    h2 {
      font-size: 1rem;
      color: #424242;
      margin-bottom: (5/16rem);
    }
    div {
      font-size: (12/16rem);
      color: #808080;
      line-height: (22/16rem);
      .z {
        border: 1px solid #00b8f0;
        color: #00b8f0;
      }
      .x {
        margin-left: (5/16rem);
        padding: 0 1px;
        background-color: #ff8625;
        color: #fff;
      }
      .y {
        margin-left: (10/16rem);
      }
    }
  }
}
</style>